body, html {
    height: 100vh;
    background-color: rgb(47 51 62);
}

.tools {
    color: white;
    background-color: #45454d;
    height: 40px;
    padding: 0 15px;
    display: flex;

    & > div {
        cursor: pointer;
        width: fit-content;
        height: 40px;
        line-height: 40px;
        border-radius: 10px;
        padding: 0 5px;
        margin: 0 15px;
        transition: background-color ease 0.3s;

        &:hover {
            background-color: #6b6969;
        }
    }
}

.contextView {
    display: flex;
}

.filesList {
    flex-shrink: 0;
    padding: 5px 15px 5px 5px;
    box-sizing: border-box;
    height: calc(100vh - 40px);
    border-right: 1px solid #7e7d7d;
    overflow: auto;
    max-width: 20vw;
    white-space: nowrap;
    /* 滚动条的整体样式 */

    &::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }

    /* 滚动条滑块的样式 */

    &::-webkit-scrollbar-thumb {
        background-color: #c9c9c9;
        border-radius: 3px;
    }

    &::-webkit-scrollbar-thumb:hover {
        background-color: #949395;
    }

    /* 滚动条轨道的样式 */

    &::-webkit-scrollbar-track {
        background-color: transparent;
    }

    .ant-tree {
        background-color: transparent;
        color: white;
    }

    .ant-tree-node-selected {
        background-color: rgba(173,173,173,.5) !important;
    }
}

.fileShowArea {
    flex: 1;
    padding: 15px;
    height: calc(100vh - 100px);
    position: relative;
    min-width: 0;
    margin: 0 auto;

    .openedFilePoolWrapper {
        max-width: 100%;
        display: flex;
        font-size: 12px;
        border-bottom: 1px solid #a4a4a4;
        overflow-x: auto;
        .openedFileItem {
            padding: 5px 8px                                                    ;
            color: white;
            transition: background-color ease-in-out 0.3s;
            flex-shrink: 0;

            &:hover {
                background-color: rgba(141, 141, 141, 0.5);

                .outOpenedFileBtn {
                    visibility: visible;
                }
            }

            &.selectFileItem {
                background-color: rgba(150, 148, 148, .7);
                border-bottom: 1px solid #6799ff;
                box-sizing: border-box;

                .outOpenedFileBtn {
                    visibility: visible;
                }
            }

            .outOpenedFileBtn {
                margin-left: 8px;
                visibility: hidden;
                cursor: pointer !important;

                svg {
                    cursor: pointer !important;
                }

                &:hover {
                    color: #c6c6c6;
                }
            }
        }

        &::-webkit-scrollbar:horizontal {
            height: 5px; /* 横向滚动条高度 */
        }

        &::-webkit-scrollbar-thumb:horizontal {
            background-color: #c9c9c9;
            border-radius: 3px;
        }

        &::-webkit-scrollbar-thumb:horizontal:hover {
            background-color: #949395;
        }

        &::-webkit-scrollbar-track:horizontal {
            background-color: transparent;
        }
    }

    .fileShowAreaTip {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: rgba(255, 255, 255, .5);
        font-size: 25px;
    }

    .ant-spin {
        position: absolute;
    }

    .fileContent {
        height: 100%;

        img {
            margin: 0 auto;
            display: block;
            width: inherit;
            height: inherit;
            object-fit: contain;
            max-width: calc(100vw - 22vw);
        }

        .fileShowText {
            width: 100%;
            height: 100%;
            overflow: auto;

            &::-webkit-scrollbar {
                width: 5px;
                height: 5px;
            }

            &::-webkit-scrollbar-thumb {
                background-color: #c9c9c9;
                border-radius: 3px;
            }

            &::-webkit-scrollbar-thumb:hover {
                background-color: #949395;
            }

            &::-webkit-scrollbar-track {
                background-color: transparent;
            }

            /* 横向滚动条样式 */

            &::-webkit-scrollbar:horizontal {
                height: 5px; /* 横向滚动条高度 */
            }

            &::-webkit-scrollbar-thumb:horizontal {
                background-color: #c9c9c9;
                border-radius: 3px;
            }

            &::-webkit-scrollbar-thumb:horizontal:hover {
                background-color: #949395;
            }

            &::-webkit-scrollbar-track:horizontal {
                background-color: transparent;
            }

            pre {
                padding: 1vw !important;
                width: fit-content;
                min-width: 100%;
                min-height: 100%;
                margin: 0;
                overflow: hidden !important;
                box-sizing: border-box;
            }
        }
    }

    .fontSizeTip {
        color: wheat;
        position: absolute;
        z-index: 9;
        left: 50%;
        transform: translate(-50%, -10vh);
        background-color: rgba(125, 125, 125, .5);
        padding: 5px 15px;
        border-radius: 15px;
        visibility: hidden;
        opacity: 0;
        transition: opacity 1s ease-in-out, visibility 1s ease-in-out;

        &.hiddenFontSizeTip {
            visibility: hidden;
            opacity: 0;
        }

        &.showFontSizeTip {
            visibility: visible;
            opacity: 1;
        }
    }

    .ant-modal-body {
        max-height: 35vh;
        overflow: auto;

        &::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }

        &::-webkit-scrollbar-thumb {
            background-color: #c9c9c9;
            border-radius: 3px;
        }

        &::-webkit-scrollbar-thumb:hover {
            background-color: #949395;
        }

        &::-webkit-scrollbar-track {
            background-color: transparent;
        }

        /* 横向滚动条样式 */

        &::-webkit-scrollbar:horizontal {
            height: 5px; /* 横向滚动条高度 */
        }

        &::-webkit-scrollbar-thumb:horizontal {
            background-color: #c9c9c9;
            border-radius: 3px;
        }

        &::-webkit-scrollbar-thumb:horizontal:hover {
            background-color: #949395;
        }

        &::-webkit-scrollbar-track:horizontal {
            background-color: transparent;
        }

        .hightLightStyleItem {
            transition: background-color linear 0.2s;
            border-radius: 5px;
            color: #616161;
            padding: 2px 5px;

            &:hover {
                background-color: wheat;
            }

            &.item_select {
                color: white;
                background-color: #baa572;
            }
        }
    }
}



